<template>
  <div>
    <!-- 页头 -->
    <el-row :gutter="10">
      <el-col
        :span="2"
        style="position:absolute; padding-top:20px;padding-left:30px;"
        ><el-button type="primary" plain icon="el-icon-arrow-left"
          >返回</el-button
        ></el-col
      >
      <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div>
          <h3>员工信息</h3>
          <p>工号：{{ employeeId }}</p>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 基本信息 -->
    <el-row>
        <el-col :offset="1" style="color:#ff9f10">|  基本信息</el-col>
    </el-row>
     <el-row :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">员工姓名：{{employeeInfo.name}}</el-col>
        <el-col :span="5">员工工号：{{employeeInfo.Id}}</el-col>
        <el-col :span="5">所在部门：{{employeeInfo.department}}</el-col>
        <el-col :span="5">职务：{{employeeInfo.position}}</el-col>
      </el-row>
      <el-row :gutter="20" class="font-mini"> 
        <el-col :span="4" :offset="2">手机号：{{employeeInfo.phone}}</el-col>
        <el-col :span="5">学历：{{employeeInfo.education}}</el-col>
        <el-col :span="5">籍贯：{{employeeInfo.hometown}}</el-col>
        <el-col :span="5">住址：{{employeeInfo.address}}</el-col>
      </el-row>
      <!-- <el-row>
        <el-col :offset="1">
            <el-button @click="editDialogVisible = true" type="primary"  style="margin-top:50px;">修改</el-button>
        </el-col>
      </el-row> -->
      <!-- 考勤信息 -->
      <el-row>
        <el-col :offset="1" style="margin-top:30px;color:#ff9f10">|  考勤信息</el-col>
    </el-row>
     <el-row   :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">出勤率：{{employeeAttend.attend_rate}}</el-col>
        <el-col :span="5">缺勤次数：{{employeeAttend.absent_count}}</el-col> 
        <el-col :span="5">迟到次数：{{employeeAttend.late_count}}</el-col>
        <el-col :span="5">累计加班：{{employeeAttend.overtime}}</el-col>
      </el-row>
      <el-row :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">出差：{{employeeAttend.business_trip}}</el-col>
        <el-col :span="5">累计请假：{{employeeAttend.askLeave}}</el-col>
      </el-row>
      <!-- 奖惩信息 -->
      <el-row>
        <el-col :offset="1" style="margin-top:30px;color:#ff9f10">|  奖惩信息</el-col>
    </el-row>
     <el-row  :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">员工姓名：{{employeeInfo.name}}</el-col>
        <el-col :span="5">员工工号：{{employeeInfo.Id}}</el-col>
        <el-col :span="5">所在部门：{{employeeInfo.department}}</el-col>
        <el-col :span="5">职务：{{employeeInfo.position}}</el-col>
      </el-row>
      <el-row :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">手机号：{{employeeInfo.phone}}</el-col>
        <el-col :span="5">学历：{{employeeInfo.education}}</el-col>
        <el-col :span="5">籍贯：{{employeeInfo.hometown}}</el-col>
        <el-col :span="5">住址：{{employeeInfo.address}}</el-col>
      </el-row>
      <!-- 职位变动 -->
      <el-row>
        <el-col :offset="1" style="margin-top:30px;color:#ff9f10">|  职位变动</el-col>
    </el-row>
     <el-row  :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">员工姓名：{{employeeInfo.name}}</el-col>
        <el-col :span="5">员工工号：{{employeeInfo.Id}}</el-col>
        <el-col :span="5">所在部门：{{employeeInfo.department}}</el-col>
        <el-col :span="5">职务：{{employeeInfo.position}}</el-col>
      </el-row>
      <el-row :gutter="20" class="font-mini">
        <el-col :span="4" :offset="2">手机号：{{employeeInfo.phone}}</el-col>
        <el-col :span="5">学历：{{employeeInfo.education}}</el-col>
        <el-col :span="5">籍贯：{{employeeInfo.hometown}}</el-col>
        <el-col :span="5">住址：{{employeeInfo.address}}</el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" style="margin-top:30px;color:#ff9f10">|  员工档案</el-col>
    </el-row>
    <el-row>
      <el-col :offset="2" style="margin-top:20px;">
        <el-link type="primary" icon="el-icon-view" @click="viewArchive">  点击查看</el-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getEmployeeInfo} from '@/api/employee'
import {getAttend} from '@/api/attendance'

export default {
  data() {
    return {
      employeeId: this.$route.params.employeeId,
      employeeInfo:{
          name:'',
          Id:'',
          department:'',
          position:'',
          phone:'',
          education:'',
          hometown:'',
          address:''
      },
      employeeAttend:{
         attend_rate:'',
         absent_count:'',
         late_count:'',
         overtime:'',
         business_trip:'',
         askLeave:''
      }
    }
  },
  mounted(){
      this.getEmployeeInfo()
      this.getEmployeeAttend()
  },
  methods:{
      async getEmployeeInfo(){
          const res = await getEmployeeInfo(this.employeeId)
          if(res.code===200){
              this.employeeInfo=res.data.employeeInfo
          }
      },
      async getEmployeeAttend(){
          const res=await getAttend(this.employeeId)
          if(res.code===200){
              this.employeeAttend=res.data.attendInfo
          }
      },
      viewArchive(){
        this.$router.push({
          name:'ArchiveDetails',
          params:{
            employeeId:this.employeeId
          }
        })
      }
  }
};
</script>
<style scoped>
.font-mini{
    font-size:14px;
    padding-top:18px;
}
</style>